<template>
	<view class="page">
		<!-- 拼团状态区域 -->
		<view class="group-status">
			<view class="timer">
				<text class="label">剩余</text>
				<text class="time-digits">{{ timer.hours.toString().padStart(2, '0') }}:</text>
				<text class="time-digits">{{ timer.minutes.toString().padStart(2, '0') }}:</text>
				<text class="time-digits">{{ timer.seconds.toString().padStart(2, '0') }}</text>
				<text class="label">结束</text>
			</view>
			
			<!-- 团长和成员头像区域 -->
			<view class="group-members">
				<view class="leader">
					<image class="avatar" :src="groupData.leader.avatar" mode="aspectFill"></image>
					<text class="role">团长</text>
				</view>
				
				<view v-for="(member, index) in groupData.members" :key="index" class="member">
					<image v-if="member" class="avatar" :src="member.avatar" mode="aspectFill"></image>
					<view v-else class="avatar empty">
						<image class="question-icon" src="/static/svg/question.svg" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<!-- 拼团状态文本 -->
			<view class="group-text">
				<text class="group-status-text">拼团中，还差{{ groupData.requiredMembers - groupData.currentMembers }}人拼团成功</text>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="primary-btn" @click="inviteFriends">邀请好友拼单</button>
				<button class="secondary-btn" @click="goHome">返回首页</button>
			</view>
			
			<view class="tip-text">
				<text>分享好友越多，成团越快</text>
			</view>
		</view>
		
		<!-- 推荐商品区域 -->
		<view class="recommend-section">
			<view class="section-title">
				<text>好物拼团推荐</text>
			</view>
			
			<view class="product-list">
				<view v-for="(item, index) in recommendProducts" :key="index" class="product-card">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
					<view class="product-info">
						<view class="group-tag">{{ item.groupSize }}人团</view>
						<view class="product-title">{{ item.title }}</view>
						<view class="product-sale">已拼{{ item.soldCount }}件</view>
						<view class="product-price">
							<text class="currency">¥</text>
							<text class="price">{{ item.price }}</text>
						</view>
						
						<view class="member-avatars">
							<image 
								v-for="(avatar, idx) in item.groupAvatars" 
								:key="idx" 
								class="member-avatar" 
								:src="avatar" 
								mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';

// 拼团数据
const groupData = reactive({
	leader: {
		avatar: '/static/svg/default-avatar.svg'
	},
	members: [null], // 一个位置为空，表示还需要1人
	requiredMembers: 3,
	currentMembers: 2,
	endTime: new Date(Date.now() + 60 * 60 * 1000) // 1小时后结束
});

// 倒计时状态
const timer = reactive({
	hours: 0,
	minutes: 59,
	seconds: 58
});

// 推荐产品数据
const recommendProducts = ref([
	{
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		price: 136,
		soldCount: 536,
		groupSize: 3,
		image: '/static/svg/cake.svg',
		groupAvatars: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		price: 136,
		soldCount: 536,
		groupSize: 3,
		image: '/static/svg/cake.svg',
		groupAvatars: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		title: '艾丽苏抹茶蛋糕早点低塘健康',
		price: 136,
		soldCount: 536,
		groupSize: 3,
		image: '/static/svg/cake.svg',
		groupAvatars: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	}
]);

// 倒计时定时器
let timerInterval = null;

// 更新倒计时
const updateTimer = () => {
	const now = new Date();
	const diff = Math.max(0, groupData.endTime - now);
	
	if (diff <= 0) {
		clearInterval(timerInterval);
		return;
	}
	
	const hours = Math.floor(diff / (1000 * 60 * 60));
	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((diff % (1000 * 60)) / 1000);
	
	timer.hours = hours;
	timer.minutes = minutes;
	timer.seconds = seconds;
};

// 邀请好友功能
const inviteFriends = () => {
	// 调用分享API
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 0,
		title: '快来和我一起拼团',
		summary: '还差1人，快来参与吧',
		imageUrl: '/static/svg/cake.svg',
		success: (res) => {
			console.log('分享成功');
		},
		fail: (err) => {
			console.error('分享失败', err);
		}
	});
};

// 返回首页
const goHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

// 组件挂载时初始化倒计时
onMounted(() => {
	updateTimer();
	timerInterval = setInterval(updateTimer, 1000);
});

// 组件卸载时清除定时器
onUnmounted(() => {
	if (timerInterval) {
		clearInterval(timerInterval);
	}
});
</script>

<style>
.page {
	padding: 20rpx;
	background-color: #f8f8f8;
}

.group-status {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.timer {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
}

.label {
	color: #999;
	font-size: 28rpx;
	margin: 0 10rpx;
}

.time-digits {
	color: #ff6b35;
	font-size: 40rpx;
	font-weight: bold;
}

.group-members {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
	position: relative;
}

.leader, .member {
	margin: 0 10rpx;
	position: relative;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #f0f0f0;
}

.empty {
	border: 2rpx dashed #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
}

.question-icon {
	width: 50rpx;
	height: 50rpx;
	opacity: 0.5;
}

.role {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background-color: #ff6b35;
	color: white;
	font-size: 20rpx;
	padding: 4rpx 10rpx;
	border-radius: 20rpx;
}

.group-text {
	margin-bottom: 40rpx;
}

.group-status-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff6b35;
}

.action-buttons {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.primary-btn, .secondary-btn {
	width: 48%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 28rpx;
}

.primary-btn {
	background-color: #ff6b35;
	color: white;
}

.secondary-btn {
	background-color: white;
	color: #333;
	border: 1rpx solid #ccc;
}

.tip-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 20rpx;
}

.recommend-section {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.product-card {
	display: flex;
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
	position: relative;
}

.group-tag {
	display: inline-block;
	background-color: #ff9966;
	color: white;
	font-size: 20rpx;
	padding: 4rpx 10rpx;
	border-radius: 6rpx;
	margin-bottom: 10rpx;
}

.product-title {
	font-size: 28rpx;
	margin-bottom: 10rpx;
	line-height: 1.4;
}

.product-sale {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.product-price {
	color: #ff6b35;
	margin-bottom: 10rpx;
}

.currency {
	font-size: 26rpx;
}

.price {
	font-size: 36rpx;
	font-weight: bold;
}

.member-avatars {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
}

.member-avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-left: -10rpx;
	border: 2rpx solid white;
}

.item {
	display: flex;
	justify-content: space-between;
}

.card {
	width: 95vw;
}
</style>
